<diV fxLayout="column">
  <mat-card>

    <mat-card-title>{{"TITLE_SCORE_BOARD" | translate}}
      <small class="confirmation">{{percentChallengesSolved}}%</small>
    </mat-card-title>
    <mat-progress-bar mode="determinate" [color]="'accent'" [value]="percentChallengesSolved"></mat-progress-bar>

  </mat-card>

  <mat-card>
    <div class="star-container" fxLayout="row wrap">
      <mat-button-toggle *ngFor="let difficulty of availableDifficulties" (change)="toggleDifficulty(difficulty)"
                         [checked]="displayedDifficulties.includes(difficulty)">
        <label>
        <span class="fa-4x fa-layers fa-fw" style="display: block; margin: 5px;">
          <svg [style.fill]="'url(#' + difficulty + ')'" class="svg-inline--fa fa-star fa-w-18 star-border" aria-hidden="true"
               data-prefix="fa" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"
               data-fa-i2svg="" stroke-width="10">
            <linearGradient [id]="difficulty" x1="0" x2="0" y1="0" y2="100%">
              <stop [attr.offset]="challenges ? offsetValue[difficulty - 1] : '100%'" class="empty-star"/>
              <stop [attr.offset]="challenges ? offsetValue[difficulty - 1] : '100%'" class="filled-star"/>
            </linearGradient>
            <path [attr.fill]="'inherit'"
                  d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z">
            </path>
          </svg>
          <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-9"
                style="font-weight:900;">{{difficulty}}</span>
          <span
            [class]="'fa-layers-counter ' + ((solvedChallengesOfDifficulty[difficulty - 1]).length === (totalChallengesOfDifficulty[difficulty - 1]).length ? 'accent-notification' : (solvedChallengesOfDifficulty[difficulty - 1]).length === 0 ? 'warn-notification' : 'primary-notification')">
              {{((solvedChallengesOfDifficulty[difficulty - 1]).length + '/' + (totalChallengesOfDifficulty[difficulty - 1]).length)}}
          </span>
        </span>
        </label>
      </mat-button-toggle>

      <button id="btnToggleAllDifficulties" class="mat-button" (click)="toggleAllDifficulty()">{{(this.toggledMajorityOfDifficulties ? "BTN_HIDE_ALL" : "BTN_SHOW_ALL") | translate}}</button>

      <mat-button-toggle (change)="toggleShowSolvedChallenges()" [checked]="showSolvedChallenges">
        <i class="fa-2x fas fa-trophy" aria-hidden="true"></i> {{"BTN_SHOW_SOLVED" | translate}}
      </mat-button-toggle>

    </div>
    <mat-divider></mat-divider>
    <div class="category-container" fxLayout="row wrap">
      <mat-button-toggle class="category-toggle" appearance="legacy" *ngFor="let category of availableChallengeCategories"
                         (change)="toggleShowChallengeCategory(category)"
                         [checked]="displayedChallengeCategories.includes(category)">
        {{category}}
      </mat-button-toggle>

      <button class="mat-button" (click)="toggleAllChallengeCategory()">{{(this.toggledMajorityOfCategories ? "BTN_HIDE_ALL" : "BTN_SHOW_ALL") | translate}}</button>
    </div>

  </mat-card>

  <mat-card>
    <mat-table *ngIf="challenges" [dataSource]="filterToDataSource(challenges)" [trackBy]="trackById">

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef translate>LABEL_NAME</mat-header-cell>
        <mat-cell *matCellDef="let challenge"> {{challenge.name}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="difficulty">
        <mat-header-cell *matHeaderCellDef translate>LABEL_DIFFICULTY</mat-header-cell>
        <mat-cell *matCellDef="let challenge">
          <bar-rating [rate]="challenge.difficulty" [max]="challenge.difficulty" readOnly="true"></bar-rating>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="description">
        <mat-header-cell *matHeaderCellDef fxShow fxHide.lt-sm fxFlex="1 1 50%" translate>LABEL_DESCRIPTION
        </mat-header-cell>
        <mat-cell *matCellDef="let challenge" fxShow fxHide.lt-sm fxFlex="1 1 50%">
          <div [innerHTML]="challenge.description"></div>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="category">
        <mat-header-cell *matHeaderCellDef translate>LABEL_CATEGORY</mat-header-cell>
        <mat-cell *matCellDef="let challenge"> {{challenge.category}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="status">
        <mat-header-cell *matHeaderCellDef translate>LABEL_STATUS</mat-header-cell>
        <mat-cell *matCellDef="let challenge">
          <app-challenge-status-badge [challenge]="challenge"
                                      [allowRepeatNotifications]="allowRepeatNotifications"
                                      [showChallengeHints]="showChallengeHints">
          </app-challenge-status-badge>
          <button
            *ngIf="showHackingInstructor && hasHackingInstructorInstructions(challenge.name)"
            mat-raised-button color="warn"
            (click)="startHackingInstructor(challenge.name)"
            [matTooltip]="('INFO_HACKING_INSTRUCTOR' | translate)"
            matTooltipPosition="above"
            class="hacking-instructor-button"
            >
            <mat-icon>
              school
            </mat-icon>
          </button>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </mat-card>

  <mat-card *ngIf="showContributionInfoBox" class="primary-notification" [innerHTML]="'CALL_FOR_CONTRIBUTIONS' | translate"></mat-card>
</diV>

<img src="assets/public/images/padding/1px.png"/>

<ngx-spinner class="overlay-fullscreen" type="timer" size="large"></ngx-spinner>
